<%--
  Created by IntelliJ IDEA.
  User: 小玄
  Date: 2022.08.29
  Time: 20:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common.jsp" %>
<html>
<head>
    <title>部门管理</title>

    <%--表格头部工具栏添加和删除--%>
    <script type="text/html" id="toolbarDemo">
        <a lay-event="add">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-normal">
                    <i class="layui-icon layui-icon-add-circle"></i>点击添加部门
                </button>
            </div>
        </a>
        <a lay-event="del">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-danger">
                    <i class="layui-icon layui-icon-delete"></i>删除选中
                </button>
            </div>
        </a>
    </script>

    <%--行尾的修改和删除--%>
    <script type="text/html" id="rowBarDemo">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>

</head>

<body>

<%--按照条件查询用户的模板--%>
<form class="layui-form" action="" style="margin-top: 10px">
    <div class="layui-inline">
        <label class="layui-form-label">部门编号</label>
        <div class="layui-input-inline">
            <input type="text" name="deptId" placeholder="请输入部门编号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">部门名称</label>
        <div class="layui-input-inline">
            <input type="text" name="deptName" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
            <button type="reset" id="search_reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%--下面是添加部门的模板--%>
<form class="layui-form" action="" id="addForm" enctype="multipart/form-data"
      style="display: none;margin: 50px 0 0 60px;">
    <div class="layui-form-item">
        <label class="layui-form-label">部门名字</label>
        <div class="layui-input-inline">
            <input type="text" name="deptName" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="padding: 0 0 0  110px">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="addUserFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%--下面是修改题目的模板--%>
<form class="layui-form" action="" id="updateForm" lay-filter="updateFormFilter"
      style="display: none;margin: 50px 0 0 60px;">
    <div class="layui-form-item">
        <label class="layui-form-label">部门编号</label>
        <div class="layui-input-inline">
            <input type="text" name="deptId" readonly autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门名称</label>
        <div class="layui-input-inline">
            <input type="text" name="deptName" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="padding: 0 0 0  110px">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="updateFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<table id="demo" lay-filter="test"></table>

<%--状态显示成按钮--%>
<script type="text/html" id="buttonTpl">
    {{#  if(d.status == 1){ }}
    <button class="layui-btn layui-btn-xs layui-btn-disabled">停用</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-xs layui-btn-normal">可用</button>
    {{#  } }}
</script>

<script>
    layui.use(['table', 'form', 'layer', 'upload'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var upload = layui.upload;
        table.render({
            elem: '#demo'
            , height: 600
            , url: '${pageContext.request.contextPath}/dept/queryAll.do'
            , page: true
            , limit: 10
            , limits: [10, 15, 20, 25, 30, 100]
            , toolbar: '#toolbarDemo'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'deptId', title: '部门编号', width: 120, sort: true, fixed: 'left', align: 'center'}
                , {field: 'deptName', title: '部门名称', width: 120, align: 'center'}
                , {field: 'orderNum', title: '显示顺序', width: 120, hide: true}
                , {field: 'status', title: '状态', width: 80, align: 'center', templet: '#buttonTpl'}
                , {field: 'delFlag', title: '删除标志', width: 120, hide: true}
                , {field: 'createTime', title: '创建时间', width: 180}
                , {field: 'createBy', title: '创建人', width: 120, align: 'center'}
                , {field: 'updateTime', title: '修改时间', width: 180}
                , {field: 'updateBy', title: '修改人', width: 120, align: 'center'}
                , {fixed: 'right', title: '操作', width: 130, align: 'center', toolbar: '#rowBarDemo'}
            ]]
        });

        //按照用户名字和部门编号条件查询的提交事件绑定
        form.on('submit(formDemo)', function (data) {
            table.reload('demo', {
                where: {
                    deptId: data.field.deptId
                    , deptName: data.field.deptName
                }
            });
            return false;
        });

        //添加用户的提交事件绑定
        form.on('submit(addUserFilter)', function (data) {
            $.ajax({
                url: "${pageContext.request.contextPath}/dept/insert.do",
                type: "POST",
                dataType: "JSON",
                data: data.field,
                success: function (ret) {
                    if (ret.code == 0) {
                        layer.closeAll();//关闭对话框
                        table.reload('demo', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }
                    layer.msg(ret.msg);
                }
            });
            //重置表单内的数据
            document.getElementById("addRoleForm").reset();
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //修改用户的提交事件绑定
        form.on('submit(updateFilter)', function (data) {
            $.ajax({
                url: "${pageContext.request.contextPath}/dept/update.do",
                type: "POST",
                dataType: "JSON",
                data: data.field,
                success: function (ret) {
                    if (ret.code == 0) {
                        layer.closeAll();//关闭对话框
                        table.reload('demo');
                    }
                    layer.msg(ret.msg);
                }
            });
            //重置表单内的数据
            document.getElementById("addRoleForm").reset();
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //搜索表单重置按钮
        $("#search_reset").click(function () {
            table.reload('demo', {
                where: {
                    deptId: ""
                    , deptName: ""
                },
                page: {
                    curr: 1
                },
            });
        })


        //监听头工具栏事件，添加和批量删除
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            console.log(data)
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 1,
                        title: '添加页面'
                        , content: $('#addForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        , offset: '50px'
                        , area: ['600px', '650px']
                    });
                    break;
                case 'del':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        //定义一个数组，封装所有的id
                        var ids = [];
                        //循环所有选中的行
                        for (let i = 0; i < data.length; i++) {
                            ids[i] = data[i].deptId;
                        }
                        layer.confirm('真的删除行么', function (index) {
                            //去后台批量删除数据
                            $.ajax({
                                url: "${pageContext.request.contextPath}/dept/delete.do",
                                type: "POST",
                                dataType: 'JSON',
                                data: {ids: ids},
                                traditional: true,
                                success: function (data) {
                                    if (data.code == 0) {
                                        //关闭对话框
                                        layer.closeAll(); //疯狂模式，关闭所有层
                                        //刷新表格数据
                                        table.reload('demo');
                                    }
                                    layer.msg(data.msg);
                                }
                            });
                        });
                    }
                    break;
            }
            ;
        });

        //监听行工具事件,修改和删除
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'update') {
                //给这个表单赋值
                form.val("updateFormFilter", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "deptId": data.deptId
                    , "deptName": data.deptName
                });
                //弹出修改框
                layer.open({
                    type: 1
                    , title: '修改页面'
                    , content: $('#updateForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    , offset: '50px'
                    , area: ['600px', '600px']
                });

            } else if (layEvent === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    //去后台删除单条数据
                    $.ajax({
                        url: "${pageContext.request.contextPath}/dept/delete.do",
                        type: "POST",
                        dataType: "JSON",
                        data: {ids: data.deptId},
                        success: function (data) {
                            if (data.code == 0) {
                                layer.closeAll(); //疯狂模式，关闭所有层
                                table.reload('demo');
                            }
                            layer.msg(data.msg);
                        }
                    });
                });
            }
        });


    });

</script>
</body>
</html>
